<template>
  <!---添加和编辑视频 -->
  <el-dialog
    v-model="dialogVisible"
    title="添加课程"
    top="10vh"
    width="960px"
    :before-close="handleClose"
  >
    <div>
      <el-input v-model="pageInfo.keyword" @blur="handleSearch" />
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column label="ID" prop="id" align="center" />
        <el-table-column label="作者">
          <template #default="scope">
            <div style="display: flex;align-items: center;">
              <el-avatar :src="scope.row.avatar" />
              <span style="margin-left: 10px;">{{ scope.row.author_name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname" />
        <el-table-column label="账号" prop="account" />
        <el-table-column width="200" label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleSelect(scope.$index)"><el-icon>
              <Edit />
            </el-icon>选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="display:flex;justify-content: center;">
        <el-pagination
          :current-page="pageInfo.pageNum"
          :page-size="pageInfo.pageSize"
          :page-sizes="[10, 20, 30, 50, 80, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { findUserAuthors } from '@/api/user.js'
const pageInfo = ref({
  pageNum: 1,
  pageSize: 2,
  total: 0,
  keyword: ''
})
const dialogVisible = ref(false)
const tableData = ref([])
const tableLoading = ref(false)
const emits = defineEmits(['select'])

// 查询用户作者信息
const handleLoadData = async() => {
  tableLoading.value = true
  const resp = await findUserAuthors(pageInfo.value)
  pageInfo.value.total = resp.data.total
  pageInfo.value.pageSize = resp.data.pageSize
  pageInfo.value.pageNum = resp.data.pageNum
  tableData.value = resp.data.list
  tableLoading.value = false
}

// 搜索
const handleSearch = () => {
  pageInfo.value.pageNum = 1
  handleLoadData()
}

// 点击分页改变
const handleCurrentChange = (pageNum) => {
  pageInfo.value.pageNum = pageNum
  handleLoadData()
}

// 点击每页显示多少条改变
const handleSizeChange = (pageSize) => {
  pageInfo.value.pageSize = pageSize
  handleLoadData()
}

// 选择用户
const handleSelect = (index) => {
  emits('select', tableData.value[index])
  handleClose()
}

// 打开用户弹窗组件
const handleOpen = () => {
  dialogVisible.value = true
  // 选择用户按钮的才来加载
  handleLoadData()
}
// 关闭用户弹窗组件
const handleClose = () => {
  dialogVisible.value = false
}

// 子组件默认包含是私有
defineExpose({
  handleOpen,
  handleClose
})

</script>

<style lang="scss" scoped>
.imgbox-up{
  width: 200px;
  height: 140px;
  margin-top:10px;
  background: #fafafa;
  border: 1px solid #eee;
  margin-top: 10px;
  display: flex;
  margin-right: 10px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  font-size: 32px;
  justify-content: center;
  color: #eee;

  .info{
    font-size:12px;
    color:#999;
  }
}

.imgbox-up:hover{
  background:#ccc;
}

.ksd-mx-1{margin-right:5px;}
.ksd-taglist{position: absolute;right:0;top:35px}
</style>>
